/* eslint global-require:0, no-nested-ternary:0 */
import { Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import * as React from 'react';
interface IInitData {
    value: string;
    label: string;
    isLeaf?: boolean;
}
interface IState {
    initData: IInitData[];
    show: boolean;
    headerTitle: string;
    headerLeft: string;
}

const DATAMENU = [
    {
        value: '1',
        label: '净水器',
    },
    {
        value: '2',
        label: '富氢杯',
    },
    {
        value: '3',
        label: '低频共振仪',
        isLeaf: true,
    },
];

export class Header extends React.Component<any, IState> {
    constructor(props: any) {
        super(props);
        this.state = {
            initData: [],
            show: false,
            headerTitle: '商城',
            headerLeft: '菜单',
        };
    }
    private onChange = (value: any) => {
        console.log(value);
    };
    private onOk = (value: any) => {
        console.log(value);
        this.onCancel();
    };
    private onCancel = () => {
        this.setState({ show: false });
    };
    private handleClick = (e: any) => {
        e.preventDefault(); // Fix event propagation on Android
        this.setState({
            show: !this.state.show,
        });
        // mock for async data loading
        if (!(this.state.initData.length !== 0)) {
            setTimeout(() => {
                this.setState({
                    initData: DATAMENU,
                });
            }, 0);
        }
    };

    private onMaskClick = () => {
        this.setState({
            show: false,
        });
    };

    public render() {
        const { initData, show } = this.state;
        const menuEl = (
            <Menu
                className="single-multi-foo-menu"
                data={initData}
                value={['1']}
                level={1}
                onChange={this.onChange}
                onOk={this.onOk}
                onCancel={this.onCancel}
                height={document.documentElement.clientHeight * 0.6}
                multiSelect
            />
        );
        const loadingEl = (
            <div
                style={{ position: 'absolute', width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}
            >
                <ActivityIndicator size="large" />
            </div>
        );
        return (
            <div className={show ? 'single-multi-menu-active' : ''}>
                <div>
                    <NavBar leftContent={this.state.headerLeft} mode="light" onLeftClick={this.handleClick} className="single-multi-top-nav-bar">
                        {this.state.headerTitle}
                    </NavBar>
                </div>
                {show ? (initData ? menuEl : loadingEl) : null}
                {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
            </div>
        );
    }
}
